<template>
  <div class="list">
    <header>
      <van-icon class="shop-collect-o" name="shop-collect-o" />
      <p class="top">茶七网商城</p>
    </header>
    <div class="main">
      <div class="t" @click="chashu()">
        <img src="../../public/images/茶书.jpg" alt="" />
        <p>茶书</p>
      </div>
      <div class="t2" @click="chaxue()">
        <img src="../../public/images/茶学.jpg" alt="" />
        <p>茶学</p>
      </div>
      <div class="t3" @click="chafu()">
        <img src="../../public/images/茶服.jpg" alt="" />
        <p>茶服</p>
      </div>
    </div>
    <hr />
    <section>
      <div class="list-l">
        <div
          class="border"
          :style="{ transform: `translateY(${this.crtIdx * 66}px)` }"
        ></div>
        <ul class="l-item">
          <li
            v-for="(item, index) in titleList"
            :key="item.id"
            @click="handleChange(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div class="list-r" ref="right">
        <div>
          <ul
            v-for="(item, index) in contentList"
            :key="index"
            class="shop-list"
          >
            <li v-for="item1 in item" :key="item1.id">
              <h2>{{ item1.name }}</h2>
              <router-link :to="'/cate/' + item1.id">
                <ul class="r-content">
                  <li v-for="itemList in item1.list" :key="itemList.id">
                    <img :src="itemList.imgUrl" alt="" />
                    <span>{{ itemList.name }}</span>
                  </li>
                </ul>
              </router-link>
            </li>
          </ul>
          <div class="shop-list append-height" style="height: 424px"></div>
        </div>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import http from "@/common/api/request.js";
import BetterScroll from "better-scroll";
export default {
  name: "List",
  components: {
    Tabbar,
  },
  data() {
    return {
      titleList: [],
      contentList: [],
      rightBScroll: "", //右侧滑动BScroll
      allHeight: [], //承载右侧每一块的高度值
      crtIdx: 0,
    };
  },

  created() {
    this.getCateList();
  },

  methods: {
    // 左右联动
    handleChange(index) {
      this.crtIdx = index;
      this.rightBScroll.scrollTo(0, -this.allHeight[index], 300);
    },
    // 获取商品分类数据
    async getCateList() {
      let res = await http.$axios({
        url: "/api/goods/list",
      });
      this.titleList = res.map((item) => {
        return {
          id: item.id,
          name: item.name,
        };
      });

      this.contentList = res.map((item) => item.data);
      this.$nextTick(() => {
        //右侧滑动
        this.rightBScroll = new BetterScroll(this.$refs.right, {
          click: true,
          bounce: false,
          probeType: 3,
        });
        let uls = this.$refs.right.getElementsByClassName("shop-list");

        // 把dom对象转换成真正的数组
        Array.from(uls).forEach((item) => {
          this.allHeight.push(item.offsetTop);
        });
        // 得到右侧滚动的值
        this.rightBScroll.on("scroll", (pos) => {
          let moveY = Math.abs(pos.y);

          if (moveY > this.allHeight[this.allHeight.length - 2]) {
            this.crtIdx = this.allHeight.length - 2;
          } else {
            this.crtIdx = this.allHeight.findIndex((item, i, array) => {
              return moveY >= item && moveY < array[i + 1];
            });
          }
        });
      });
    },

    // 茶书
    chashu() {
      this.$router.push("/chashu");
    },
    // 茶学
    chaxue() {
      this.$router.push("/chaxue");
    },
    // 茶服
    chafu() {
      this.$router.push("/chafu");
    },
  },
};
</script>

<style scoped>
a {
  color: #454545;
  text-decoration: none;
}
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: STFangsong;
  letter-spacing: 1px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
header .top {
  margin-right: 223px;
  margin-top: 23px;
  font-size: 17px;
}
header .shop-collect-o {
  left: 45px;
  top: 7px;
  font-size: 23px;
}
.main {
  display: flex;
  margin-top: 21px;
  margin-left: 14px;
  font-size: 24px;
}
.main p {
  margin-left: 22px;
  margin-top: 9px;
}
.main img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.main .t {
  border-radius: 50%;
  margin-right: 32px;
  margin-left: 4px;
}
.main .t2 {
  margin-right: 30px;
}
section {
  display: flex;
  flex: 1;
  overflow: hidden;
  margin-top: 0;
  background-image: url("../../public/images/背景2.jpg");
}
.list-l {
  display: flex;
  width: 2.48rem;
  border-right: 1px solid #cccccc;
  overflow: auto;
}
.list-l .border {
  width: 2px;
  height: 1.3333rem;
  transition: all 0.5s;
  background-color: #b54f4a;
}
.list-l .l-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}
.list-l .l-item li {
  width: 100%;
  line-height: 66px;
  text-align: center;
  font-size: 0.373333rem;
}
.list-r {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.list-r .shop-list {
  text-align: center;
}
.list-r .shop-list h2 {
  padding: 0.533333rem 0;
  font-size: 0.64rem;
  font-weight: 400;
}
.list-r .shop-list .r-content {
  display: flex;
  flex-wrap: wrap;
}
.list-r .shop-list .r-content li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  padding: 0.266666rem 0;
}
.list-r .shop-list .r-content li img {
  width: 1.413333rem;
  height: 1.413333rem;
}
.list-r .shop-list .r-content li span {
  font-size: 0.426666rem;
}
::v-deep.tabbar {
  border-top: 1px solid #cccccc;
} /*# sourceMappingURL=./index.css.map */
</style>
